在React Native中用WebView打开非HTTPS的的站点

在React Native应用中使用WebView可以复用已经写好的web页面。

在如果我们的应用在IOS9或者更高的版本中使用WebView尝试连接任何的HTTP服务，将会请求失败，也就不能成功地载入web页面，因为HTTP服务不支持最新的SSL技术

让我们看一下这个以下操作。这里我们尝试在WebView中访问HTTP的站点

<WebView
 contentInset={{ top: -50 }}
                        startInLoadingState={true}
                        source={{ uri: 			'http://movie.douban.com/subject/25862357/' }}
                        //source={{ uri: this.props.url }}
                        style={styles.webView}
                    />

在IOS9.0或者更高的环境下，在iPhone模拟器中运行应用，将会出现错误信息

Error Loading Page
Domain: NSURLErrorDomain
Error Code: -1022
Description: The resource could not be loaded because
the App Transport Security policy requires the use of a
secure connection

理想情况下，这个站点会尝试去连接HTTPS服务。然而，该站点HTTPS服务可能没有被启用或者不支持。

例如，我们在开发app的过程中，可能会想要去连接HTTP的服务。

使用Xcode-将使用的站点服务加入白名单

为了在WebView中访问HTTP站点，我们需要在Xcode中打开项目，然后打开 Info.plist file

在打开的列表中，我们可以找到App Transport Security Settings

当我们展开找到的这一项时，可以看到在Exception Domains中的localhost，在localhost的展开项中有NSTemporaryExceptionAllowsInsecureHTTPLoads，而且它的value值是true

因为有了以上设置，当我们连接localhost的服务时，app可以成功运行，即使访问的站点服务支持的类型是HTTP而不是HTTPS.

所以为了能够成功访问非HTTPS的站点，我们需要将访问站点的URL添加到白名单。

鼠标移到Exception Domains上，我们可以看到在右边栏的+
点击添加我们的domain，并且设置它的类型为dictionary
现在点击我们刚才添加的domain,然后添加一项key值为NSTemporaryExceptionAllowsInsecureHTTPLoads,类型为Boolean,value值为YES,和之前我们看到的localhost下的设置项是一样的
在终端运行react-native run-ios，我们的应用将会被重新加载，如果没有成功，在运行应用之前先使用xcodeclean build

使用Xcode-将所有站点服务加入白名单

在实际开发过程中一个个地将站点加入白名单会显得有点麻烦，这时候我们可以将所有的域名都加入白名单。

为了允许所有非HTTPS的站点服务，先删除Xcode中的info.plist里面的Exception Domains，然后添加一个新的key值Allow Arbitrary Loads,value值为true

总结

如果使用第一种方法，即将特定的站点服务加入白名单不见效果，可以使用第二种方法，将所有站点服务都加入白名单，亲测有效哦。